<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdn.staticfile.org/layui/2.8.10/css/layui.css" rel="stylesheet">
</head>
<body>
<div id="ID-test-layer-wrapper" style="display: none;">
    <fieldset class="layui-elem-field">
        <legend>应用添加</legend>
        <div class="layui-field-box">
            <form class="layui-form" lay-filter="form-demo-submit">
                <div class="layui-inline">
                    <label class="layui-form-label">服务器-用户</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">服务器-密码</label>
                    <div class="layui-input-block">
                        <input type="text" name="password" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">服务器-IP</label>
                    <div class="layui-input-block">
                        <input type="text" name="host" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">服务器-端口</label>
                    <div class="layui-input-block">
                        <input type="text" name="port" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">应用名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="appName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">启动脚本</label>
                    <div class="layui-input-block">
                        <input type="text" name="startFile" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">停止脚本</label>
                    <div class="layui-input-block">
                        <input type="text" name="stopFile" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">端口</label>
                    <div class="layui-input-block">
                        <input type="text" name="appPort" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </form>
        </div>
    </fieldset>
    <button class="layui-btn" id="test-btn-submit">添加</button>
</div>
<div style="padding: 16px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">启动</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckDataStop">停止</button>
        <button class="layui-btn layui-btn-sm" lay-event="test-page-wrap">添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
    </div>
</script>
<script src="//cdn.staticfile.org/layui/2.8.10/layui.js"></script>
<script th:inline=none>
    layui.use(['table', 'dropdown', 'form'], function(){
        var table = layui.table;
        var dropdown = layui.dropdown;

        // 创建渲染实例
        table.render({
            elem: '#test',
            url:'/chat/list', // 此处为静态模拟数据，实际使用时需换成真实接口
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            height: 'full-35', // 最大高度减去其他容器已占有的高度差
            css: [ // 重设当前表格样式
                '.layui-table-tool-temp{padding-right: 145px;}'
            ].join(''),
            cellMinWidth: 80,
            totalRow: true, // 开启合计行
            page: false,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field:'id', fixed: 'left', width:80, title: 'ID', sort: true},
                {field:'userName', width:80, title: '服务器-用户名'},
                {field:'password', width:80, title: '服务器-密码'},
                {field:'host', width:80, title: '服务器-IP'},
                {field:'port', width:80, title: '服务器-ssh端口'},
                {field:'appName', width:80, title: '应用名称'},
                {field:'startFile', width:80, title: '启动脚本'},
                {field:'stopFile', width:80, title: '停止脚本'},
                {field:'appPort', width:80, title: '端口'},
                {field:'status', width:80, title: '状态'},
                {fixed: 'right', title:'操作', width: 100, minWidth: 100, toolbar: '#barDemo'}
            ]],
            done: function(){
                var id = this.id;
                // 下拉按钮测试
                dropdown.render({
                    elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                    data: [{
                        id: 'add',
                        title: '添加'
                    },{
                        id: 'update',
                        title: '编辑'
                    },{
                        id: 'delete',
                        title: '删除'
                    }],
                    // 菜单被点击的事件
                    click: function(obj){
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch(obj.id){
                            case 'add':
                                layer.open({
                                    title: '添加',
                                    type: 1,
                                    area: ['80%','80%'],
                                    content: '<div style="padding: 16px;">自定义表单元素</div>'
                                });
                                break;
                            case 'update':
                                if(data.length !== 1) return layer.msg('请选择一行');
                                layer.open({
                                    title: '编辑',
                                    type: 1,
                                    area: ['80%','80%'],
                                    content: '<div style="padding: 16px;">自定义表单元素</div>'
                                });
                                break;
                            case 'delete':
                                if(data.length === 0){
                                    return layer.msg('请选择一行');
                                }
                                layer.msg('delete event');
                                break;
                        }
                    }
                });

                // 重载测试
                dropdown.render({
                    elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
                    data: [{
                        id: 'reload',
                        title: '重载'
                    },{
                        id: 'reload-deep',
                        title: '重载 - 参数叠加'
                    },{
                        id: 'reloadData',
                        title: '仅重载数据'
                    },{
                        id: 'reloadData-deep',
                        title: '仅重载数据 - 参数叠加'
                    }],
                    // 菜单被点击的事件
                    click: function(obj){
                        switch(obj.id){
                            case 'reload':
                                // 重载 - 默认（参数重置）
                                table.reload('test', {
                                    where: {
                                        abc: '123456',
                                        //test: '新的 test2',
                                        //token: '新的 token2'
                                    },
                                });
                                break;
                            case 'reload-deep':
                                // 重载 - 深度（参数叠加）
                                table.reload('test', {
                                    where: {
                                        abc: 123,
                                        test: '新的 test1'
                                    },
                                }, true);
                                break;
                            case 'reloadData':
                                // 数据重载 - 参数重置
                                table.reloadData('test', {
                                    where: {
                                        abc: '123456',
                                        //test: '新的 test2',
                                        //token: '新的 token2'
                                    },
                                    scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
                                    height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                });
                                break;
                            case 'reloadData-deep':
                                // 数据重载 - 参数叠加
                                table.reloadData('test', {
                                    where: {
                                        abc: 123,
                                        test: '新的 test1'
                                    }
                                }, true);
                                break;
                        }
                        layer.msg('可观察 Network 请求参数的变化');
                    }
                });

                // 行模式
                dropdown.render({
                    elem: '#rowMode',
                    data: [{
                        id: 'default-row',
                        title: '单行模式（默认）'
                    },{
                        id: 'multi-row',
                        title: '多行模式'
                    }],
                    // 菜单被点击的事件
                    click: function(obj){
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch(obj.id){
                            case 'default-row':
                                table.reload('test', {
                                    lineStyle: null // 恢复单行
                                });
                                layer.msg('已设为单行');
                                break;
                            case 'multi-row':
                                table.reload('test', {
                                    // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                                    lineStyle: 'height: 95px;'
                                });
                                layer.msg('即通过设置 lineStyle 参数可开启多行');
                                break;
                        }
                    }
                });
            },
            error: function(res, msg){
                console.log(res, msg)
            }
        });
        // 工具栏事件
        table.on('toolbar(test)', function(obj){
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);

            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    // 发送数据到停止服务器
                    fetch('/chat/start',{
                        method:'POST',
                        headers:{'Content-Type':'application/json'},
                        body:JSON.stringify(data)
                    }).then(res =>{
                        return res.json()
                    }).then(data =>{
                        alert(data.message);
                    })
                    break;
                case 'getCheckDataStop':
                    var data = checkStatus.data;
                    // 发送数据到停止服务器
                    fetch('/chat/stop',{
                        method:'POST',
                        headers:{'Content-Type':'application/json'},
                        body:JSON.stringify(data)
                    }).then(res =>{
                        return res.json()
                    }).then(data =>{
                        alert(data.message);
                    })
                    layer.alert(layui.util.escape(JSON.stringify(data)));
                    break;
                case 'test-page-wrap':
                    var $ = layui.$;
                    var form = layui.form;
                    var layer = layui.layer;
                    // 任意位置按钮触发提交
                    $('#test-btn-submit').on('click', function(){
                        form.submit('form-demo-submit', function(data){
                            var field = data.field; // 获取表单全部字段值
                            // 执行提交
                            layer.confirm('确定提交吗？', function(index){
                                layer.close(index); // 关闭确认提示框
                                fetch('/chat/add',{
                                    method:'POST',
                                    headers:{'Content-Type':'application/json'},
                                    body:JSON.stringify(field)
                                }).then(res =>{
                                    return res.json()
                                }).then(data =>{
                                    table.reload();
                                    layer.msg(data.message)
                                })
                            });
                        });
                        return false;
                    });
                    break;
            };
        });
        // 表头自定义元素工具事件 --- 2.8.8+
        table.on('colTool(test)', function(obj){
            var event = obj.event;
            console.log(obj);
            if(event === 'email-tips'){
                layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
                    title: '当前列属性配置项'
                });
            }
        });
    });




    /*layui.use(function(){
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        // 任意位置按钮触发提交
        $('#test-btn-submit').on('click', function(){
            form.submit('form-demo-submit', function(data){
                var field = data.field; // 获取表单全部字段值
                // 执行提交
                layer.confirm('确定提交吗？', function(index){
                    layer.close(index); // 关闭确认提示框
                    fetch('/chat/add',{
                        method:'POST',
                        headers:{'Content-Type':'application/json'},
                        body:JSON.stringify(field)
                    }).then(res =>{
                        return res.json()
                    }).then(data =>{
                        table.reload();
                        layer.msg(data.message)
                    })
                });
            });
            return false;
        });
    });*/

</script>
</body>
</html>